<template>
  <el-menu id="my_menu" default-active="2" router class="el-menu-vertical-demo my_menu" unique-opened
           :collapse="isCollapse"
           background-color="#fff" text-color="#000" active-text-color="#fff">
    <el-row v-for="(item,index) in navigation" :key="index">
      <el-submenu v-show="item.value.type == 1" :index="item.value.id+''">
        <template slot="title">{{item.value.name}}</template>
        <el-menu-item :style="elMenuItem" v-for="item2 in item.children" :key="item2.value.id" :index="item2.value.url">
          {{item2.value.name}}
        </el-menu-item>
      </el-submenu>
      <el-menu-item v-show="item.value.type == 2" class="only_menu" :index="item.value.url">{{item.value.name}}
      </el-menu-item>
    </el-row>
  </el-menu>
</template>

<script>
  export default {
    data() {
      return {
        elMenuItem: {minWidth: '100px'},
        navigation: undefined,
        isShow: true,
        isCollapse: false
      }
    },
    methods: {},
    created() {
      this.$api.getNavigation().then(res => {
        if (res.code === '000000') {
          this.navigation = res.data
        }
      })
    }

  }
</script>

<style lang="less">
  #my_menu {

    .el-menu-item, .el-submenu__title {
      height: 45px !important;
      line-height: 45px !important;
      /*border-bottom: 1px solid #ccc;*/
    }

    .el-menu-item.is-active {
      background-color: white !important;
      color: blue !important;
    }
    .el-menu-item:before{
      width: 0;
      height: 0;
      display: table;
      border: 5px solid transparent;
      border-right-color: red;
    }
    .el-submenu.is-opened {
      background-color: #2086ee !important;
    }
    .el-submenu.is-opened > div:first-child {
      background-color: #2086ee !important;
      color: white !important;
    }
    li .el-menu-item {
      background-color: #f0f0f0 !important;
      list-style: circle !important;
    }
    li .el-menu-item:hover {
      background-color: white !important;
      color: blue !important;
    }
    li .el-menu-item {
      list-style: disc!important;
    }
    li {
      border-bottom: 1px solid #ccc;
    }

    /*.el-menu-item:hover{*/
    /*background-color: #fff!important;*/
    /*color: #000!important;*/
    /*}*/
    .el-menu {
      border-right: none;
    }
    #my_menu div > li > .el-submenu__title {
      background-color: inherit !important;

    }
    .my_menu {
      /*position: relative;*/
      background: url("../../assets/img/bg2.jpg") no-repeat !important;
      z-index: 1000000;
    }
    .only_menu.is-active {
      background-color: #ccc !important;
      color: blue !important;
    }
  }
</style>
